import React, { useState } from 'react';
import styles from './style.module.css';
import { Dropdown } from 'antd';
import {
  EditOutlined,
  BarChartOutlined,
  ShareAltOutlined,
  EyeOutlined,
  MoreOutlined,
  CopyOutlined,
  DeleteOutlined
} from '@ant-design/icons';

/**
 * Work 类型定义
 * @typedef {Object} Work
 * @property {number} id - 作品唯一标识
 * @property {string} type - 作品类型（用于筛选）
 * @property {string} typeLabel - 作品类型显示文本
 * @property {string} status - 作品状态（已发布/未发布等）
 * @property {string} cover - 作品封面图片URL
 * @property {string} title - 作品标题
 * @property {string} date - 创建/更新日期
 * @property {number} views - 浏览量
 * @property {number} visitors - 访客数
 * @property {string} typeTag - 作品标签
 * @property {string} [duration] - 视频时长（可选）
 */
export interface Work {
  id: number;
  type: string;
  typeLabel: string;
  status: string;
  cover: string;
  title: string;
  date: string;
  views: number;
  visitors: number;
  typeTag: string;
  duration?: string;
}

interface WorkCardProps {
  work: Work;
}

/**
 * WorkCard 组件 - 单个作品卡片
 * @param {WorkCardProps} props - 组件属性
 * @param {Work} props.work - 作品数据
 */
const WorkCard: React.FC<WorkCardProps> = ({ work }) => {
  const [showMoreDropdown, setShowMoreDropdown] = useState(false);

  // 更多按钮的下拉菜单项
  const moreItems = [
    {
      key: 'copy',
      icon: <CopyOutlined />,
      label: '复制',
      onClick: () => console.log('复制', work.id)
    },
    {
      key: 'delete',
      icon: <DeleteOutlined />,
      label: '删除',
      onClick: () => console.log('删除', work.id)
    }
  ];

  // 处理预览按钮点击
  const handlePreview = (e: React.MouseEvent) => {
    e.stopPropagation();
    console.log('预览作品', work.id);
  };

  // 处理编辑按钮点击
  const handleEdit = (e: React.MouseEvent) => {
    e.stopPropagation();
    console.log('编辑作品', work.id);
  };

  // 处理数据按钮点击
  const handleData = (e: React.MouseEvent) => {
    e.stopPropagation();
    console.log('查看数据', work.id);
  };

  // 处理推广按钮点击
  const handleShare = (e: React.MouseEvent) => {
    e.stopPropagation();
    console.log('推广作品', work.id);
  };

  return (
    <div className={styles.workCard}>
      <div className={styles.workCardCover}>
        <img src={work.cover} alt={work.title} />
        <span className={styles.workCardStatus}>{work.status}</span>
        {work.duration && (
          <span className={styles.workCardDuration}>{work.duration}</span>
        )}
        {/* 遮罩层 */}
        <div className={styles.coverOverlay}>
          <button className={styles.previewButton} onClick={handlePreview}>
            <EyeOutlined /> 预览
          </button>
        </div>
        {/* 更多按钮 */}
        <Dropdown
          menu={{ items: moreItems }}
          placement="bottomRight"
          trigger={['click']}
          open={showMoreDropdown}
          onOpenChange={setShowMoreDropdown}
        >
          <button 
            className={styles.moreButton}
            onClick={(e) => {
              e.stopPropagation();
            }}
          >
            <MoreOutlined />
          </button>
        </Dropdown>
      </div>
      <div className={styles.workCardTypeTag}>{work.typeLabel}</div>
      {/* 默认显示的标题和日期 */}
      <div className={styles.workCardTitle}>{work.title}</div>
      <div className={styles.workCardDate}>{work.date}</div>
      {/* 操作按钮区 */}
      <div className={styles.actionButtons}>
        <button className={styles.actionButton} onClick={handleEdit}>
          <EditOutlined className={styles.actionButtonIcon} />
          编辑
        </button>
        <button className={styles.actionButton} onClick={handleData}>
          <BarChartOutlined className={styles.actionButtonIcon} />
          数据
        </button>
        <button className={styles.actionButton} onClick={handleShare}>
          <ShareAltOutlined className={styles.actionButtonIcon} />
          推广
        </button>
      </div>
      <div className={styles.workCardMeta}>
        <span>{work.views} 浏览</span>
        <span>{work.visitors} 访客</span>
        <span>{work.typeTag}</span>
      </div>
    </div>
  );
};

export default WorkCard; 